<template>
  <div class="layout-container testSceneExplainDescriptContainer">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-change="onHandleClick">
      <el-tab-pane label="初始部署关系描述项" name="initDeployRelateDescript">
        <InitDeployRelateDescriptTab
          :interferType="props.interferType"
          :dealDataBeforeSources="props.dealDataBeforeSources"
          :dealDataAfterSources="props.dealDataAfterSources"
        />
      </el-tab-pane>
      <el-tab-pane label="试验说明描述项" name="testExplainDescript">
        <TestExplainDescriptTab
          :dealDataBeforeSources="props.dealDataBeforeSources"
          :dealDataAfterSources="props.dealDataAfterSources"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, watch } from 'vue';
import type { TabsInstance, TabsPaneContext } from 'element-plus';
import InitDeployRelateDescriptTab from './InitDeployRelateDescript.vue';
import TestExplainDescriptTab from './TestExplainDescript.vue';

const tabPosition = ref<TabsInstance['tabPosition']>('left');
const activeName = ref<string>('initDeployRelateDescript');
// 接收父组件传递过来的props
const props = defineProps({
  interferType: { type: String, default: '舰载有源干扰-雷达' },
  dealDataBeforeSources: {
    type: Object,
    default: () => {
      return {};
    },
  },
  dealDataAfterSources: {
    type: Object,
    default: () => {
      return {};
    },
  },
});

// 页签切换事件
const onHandleClick = (TabPaneName: string) => {
  activeName.value = TabPaneName;
};
</script>

<style lang="scss" scoped>
@import '@/assets/style/buttons';
:deep() {
  .el-tabs__nav-wrap::after {
    width: 280px;
  }
}
</style>
